<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click='changeTest'>test</button>
        <button @click='changeTest2'>test2</button>
    </div>
</body>
<script src="./js/vue.min.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data() {
            return {
                test: 0,
                obj: { name: 1 },
                arr: [{ val: 5 }, { val: 11 }, { val: 21 }]
            }
        },
        /* computed: {
            computedTest() {
                return this.test + 1
            }
        }, */
        watch: {
            test: {
                handler(newVal, oldVal) {
                    console.log(newVal,'new');
                    console.log(oldVal,'old');
                    this.test2 = 10+newVal;
                    // this.test2 = Val+10;
                },
                immediate: true
            },
            obj:{
                handler(newVal, oldVal) {
                    console.log(newVal,oldVal,'newAndOld');
                    if(newVal.name===2){
                        console.log('changed');
                    }
                },
                immediate: true,
                deep:true,
            }
        },
        methods: {
            changeTest(){
                this.test=100
                console.log('test1',this.test);
                console.log('test2',this.test2);
            },
            changeTest2(){
                this.obj={name:2}
            },
        },
        created() {
            this.test = 10;
            console.log(this.test);
            console.log('test2',this.test2);
            console.log(this.computedTest);//undefined
            for (let i in this.arr) {
                console.log(this.arr[i].val);
                if (i > 10)
                    break;

            }
        },
    })
</script>

</html>